<template>
	<ls-page title="">
		<view class="records-container">
			<view class="records-container-header">
				<view class="header-time" @click="timeShow = true">{{ timeText }}</view>
				<view class="header-type" @click="typeShow = true"><text v-show="!typeText">交易类型</text>{{ typeText }}
				</view>
			</view>
			<!-- <view class="records-container-main"> -->
			<scroll-view class="records-container-main" @scrolltolower="scrollToLower" :scroll-y="true" lower-threshold="1000">
				<view class="container-main-item" v-for="(v, k) in tradeList" :key="k">
					<view class="main-item-upper">
						<view class="upper-left" v-if="v.remark == '升级会员'">升级会员</view>
						<view class="upper-left" v-else>{{ v.operTypeName }}</view>
						<view class="upper-right"
							:style="'color:' + (v.operAmt > 0 ? 'var(--one--self--color)' : '#FF3333')">
							<text class="send-amt" v-if="v.remark != '升级会员'"
								style="color: #666666; font-weight: 500; font-size: 24rpx">(本金{{ v.operAmt }},赠送{{ v.opPreAmt }})</text>
							<text v-if="v.operAmt + v.opPreAmt > 0">+</text>
							{{ v.allNum }}
						</view>
					</view>

					<view class="main-item-bellow">
						<view class="bellow-left">{{ v.operDate }}</view>
						<view class="bellow-right" v-if="v.remark != '升级会员'">余额：{{ v.currentAmt }}</view>
					</view>
				</view>
			</scroll-view>
			<!-- </view> -->
		</view>

		<x-picker title="交易类型" :show="typeShow" @cancel="typeCancel" @confirm="typeConfirm" :columns="typeColumns" />
		<up-datetime-picker title="时间选择"  :show="timeShow" v-model="selectTime" :closeOnClickOverlay="true"
			@close="timeShow = false" mode="year-month" @cancel="timeShow = false"
			@confirm="timeConfirm"></up-datetime-picker>

		<up-picker :show="typeShow" :closeIcon="false" title="选择类型" ref="uPickerRef" @close="typeShow = false"
			:closeOnClickOverlay="true" @cancel="typeShow = false" :columns="columns" keyName="name"
			@confirm="typeConfirm"></up-picker>
	</ls-page>
</template>

<script setup>
	import dayjs from 'dayjs';
	import { _FormatNumber } from '@/until/tools.js';
	import {
		ref
	} from 'vue';
	import {
		HFiveMemberAppObjProcess
	} from '@/api/public.js'

	const tradeList = ref([])

	const selectTime = ref(dayjs().format('YYYY-MM'))

	const timeText = ref(dayjs().format('YYYY年MM月'))
	const timeShow = ref(false)
	const timeConfirm = (e) => {
		console.log(e);
		timeText.value = dayjs(e.value).format('YYYY年MM月')
		timeShow.value = false
		postForm.value.startDate = dayjs(e.value).startOf('month').format('YYYY-MM-DD HH:mm:ss')
		postForm.value.endDate = dayjs(e.value).endOf('month').format('YYYY-MM-DD HH:mm:ss')
		getRecord(true)
	}
	const postForm = ref({
		type: '',
		startDate: dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
		endDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
		pageSize: '15',
		pageIndex: '1',
		memberCode: uni.getStorageSync('cardInfo').code
	})

	const hasMore = ref(false)
	const scrollToLower = () => {
		console.log(11);
		if (!hasMore.value) {
			return
		}
		postForm.value.pageIndex++
		getRecord()
	}


	// 获取交易记录
	const getRecord = async (flag) => {
		if (flag) {
			postForm.value.pageIndex = 1
		}
		const res = await HFiveMemberAppObjProcess({
			"functionName": "MemberTransactionRecord_H5",
			"contentData": postForm.value
		})
		console.log(res);
		if (postForm.value.pageIndex == 1) {
			tradeList.value = res
		} else if (postForm.value.pageIndex > 1) {
			tradeList.value = tradeList.value.concat(res);
		}
		if (res.length < postForm.value.pageSize) {
			hasMore.value = false
		} else {
			hasMore.value = true
		}
		tradeList.value = tradeList.value.map(obj => ({
			...obj,
			operDate: dayjs(obj.operDate).format('YYYY-MM-DD HH:mm:ss'),
			currentAmt: _FormatNumber(obj.currentAmt), // 保留两位小数
			operAmt: _FormatNumber(obj.operAmt),
			// allNum: Number(obj.operAmt) + Number(obj.opPreAmt)
			allNum: _FormatNumber(Number(obj.operAmt) + Number(obj.opPreAmt)) 
		}));
		console.log(tradeList.value);

	};


	const typeShow = ref(false);
	const columns = ref([])
	// 获取交易类型
	const doGetDicData = async () => {
		const res = await HFiveMemberAppObjProcess({
			"functionName": "GetDicData_H5",
			"contentData": {
				parentCode: '561'
			}
		})
		console.log(res);
		res.push({
			code: '',
			name: '全部 '
		})
		columns.value = [res]
		console.log(columns.value);
	};


	const typeText = ref('')
	const typeConfirm = (e) => {
		console.log(e.value[0]);
		typeText.value = e.value[0].name
		postForm.value.type = e.value[0].code
		typeShow.value = false
		getRecord(true)
	}
	

	onLoad((options) => {
		getRecord(true)
		doGetDicData()
	});
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-datetime-picker__has-input {
			display: none !important;
		}
	}

	.records-container {
		width: 100%;
		// overflow: hidden;
		height: 100%;
		box-sizing: border-box;
		padding: 0 24rpx 40rpx;
		display: flex;
		flex-direction: column;

		/* padding-bottom: 340rpx;*/
		.records-container-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			position: fixed;
			z-index: 10;
			background-color: var(--mainbaccolor);

			/* padding: 40rpx 0;*/
			.header-time {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: var(--maincolorf1);
				line-height: 32rpx;
				position: relative;
				padding: 40rpx 30rpx 40rpx 0;
				padding-right: 30rpx;

				&::after {
					content: '';
					position: absolute;
					top: 52rpx;
					right: 0;
					width: 18rpx;
					height: 12rpx;
					background-image: url('https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/qnjg/index/arrow.png');
					background-size: 100% auto;
					background-position: right center;
					background-repeat: no-repeat;
				}
			}

			.header-type {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: var(--maincolorf1);
				line-height: 28rpx;
				padding: 40rpx 30rpx 40rpx 0;
				margin-right: 30rpx;
				position: relative;
                
				&::after {
					content: '';
					position: absolute;
					top: 52rpx;
					right: 0;
					width: 18rpx;
					height: 8rpx;
					background-image: url('https://jtmc.oss-cn-hangzhou.aliyuncs.com/wmp/qnjg/index/arrow.png');
					background-size: 100% auto;
					background-position: right center;
					background-repeat: no-repeat;
				}
			}
		}

		.records-container-main {
			/* height: 100%;*/
			padding-top: 120rpx;
			// overflow: hidden;
			
			.container-main-item {
				background: var(--maincolor);
				border-radius: 16rpx;
				padding: 32rpx 24rpx;
				margin-bottom: 20rpx;

				.main-item-upper {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 30rpx;

					.upper-left {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: var(--maincolorf1);
						line-height: 32rpx;
					}

					.upper-right {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: var(--maincolorf1);
						line-height: 32rpx;
					}
				}

				.main-item-bellow {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.bellow-left {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: var(--maincolorf2);
						line-height: 24rpx;
					}

					.bellow-right {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: var(--maincolorf2);
						line-height: 24rpx;
					}
				}
			}
		}
	}

	::v-deep .u-picker .u-toolbar__wrapper__cancel {
		color: var(--maincolorf2) !important;
	}

	::v-deep .u-picker .u-toolbar__wrapper__confirm {
		color: var(--maincolorf1) !important;
	}

	::v-deep .u-popup__content {
		border-radius: 40rpx !important;
	}
</style>